<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>

    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="5-1" open-index="5" style="height: 100%;"></sideBar>
      </el-aside>
      <el-main>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 20px">风险信息</span>
          </div>
          <div class="mg">
            <p>风险编号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope.risk_id}}</p>
            <p>风险名称：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope.name}}</p>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span style="font-size: 20px">风险处置信息</span>
          </div>
          <div class="mg">
            <p>处置编号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope.risk_cope_id}}</p>
            <p>处置时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope.time}}</p>
          </div>
          <el-divider></el-divider>
          <div class="mg_2">
            <el-steps v-if="risk_cope.status < 3" :active="risk_cope.status" finish-status="success">
              <el-step v-if="risk_cope.status===0" title="正在处置考评"></el-step>
              <el-step v-if="risk_cope.status===1 || risk_cope.status===2" title="处置考评完成"></el-step>
              <el-step v-if="risk_cope.status===0" title="未处置结果分析"></el-step>
              <el-step v-if="risk_cope.status===1" title="正在处置结果分析"></el-step>
              <el-step v-if="risk_cope.status===2" title="处置结果分析完成"></el-step>
            </el-steps>

            <el-steps v-if="risk_cope.status >= 3" :active="risk_cope.status-2" finish-status="success">
              <el-step v-if="risk_cope.status===3 " title="处置考评失败" status="error"></el-step>
              <el-step v-if="risk_cope.status===4 " title="处置考评完成"></el-step>
              <el-step v-if="risk_cope.status===3" title="未处置结果分析"></el-step>
              <el-step v-if="risk_cope.status===4" title="处置结果分析失败" status="error"></el-step>
            </el-steps>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span style="font-size: 20px">风险处置考评信息</span>
          </div>
          <div class="mg">
            <p>处置考评编号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope_record.risk_cope_record_id}}</p>
            <p>处置考评时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope_record.time}}</p>
            <p>操作人员：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope_record.user_id}}</p>
            <p>操作内容：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope_record.operation}}</p>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span style="font-size: 20px">风险处置结果分析</span>
          </div>
          <div class="mg">
            <p>结果分析编号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope_ana.risk_cope_ana_id}}</p>
            <p>结果分析内容：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{risk_cope_ana.analysis}}</p>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span style="font-size: 20px">应急处置</span>
            <el-button style="float: right; padding: 3px" type="text" @click="drawer = true">编辑</el-button>
            <el-drawer
              title="应急处置"
              :visible.sync="drawer"
              :direction="direction"
              ref="thisdrawer">
              <el-row :gutter="20">
                <el-col :span="6" :offset="2">应急处置内容</el-col>
              </el-row>

              <el-row :gutter="20" style="margin-top: 12px">
                <el-col :span="20" :offset="2">
                  <el-input v-model="emergency.content" placeholder="输入应急处置内容" type="textarea" autosize></el-input>
                </el-col>
              </el-row>

              <el-row :gutter="20" style="margin-top: 40px">
                <el-col :span="6" :offset="2">
                  <el-button @click="editEmergency()" type="primary" style="width: 130%">确认提交</el-button></el-col>
              </el-row>
            </el-drawer>
          </div>
          <div class="mg">
            <p>应急处置编号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{emergency.emergency_id}}</p>
            <p>应急处置内容：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{emergency.content}}</p>
          </div>
        </el-card>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "copeRecord",
  data() {
    return {
      queryData:{
        risk_cope_id:'',
      },
      risk_cope: {
        risk_cope_id: '',
        time: '',
        risk_id: '',
        name: '',
        status: 0,
      },
      risk_cope_record: {
        risk_cope_record_id: '',
        time: '',
        risk_cope_id: '',
        operation: '',
        user_id: '',
      },
      risk_cope_ana:{
        risk_cope_ana_id: '',
        analysis: ''
      },
      emergency: {
        emergency_id: '',
        risk_cope_id: '',
        content: '',
      },
      addEmergency: {
        risk_cope_id: '',
        content: '',
      },
      direction: 'rtl',
      drawer: false,
    }
  }, mounted() {
    this.queryData.risk_cope_id = this.$route.query.risk_cope_id;
    this.$axios.post(`http://127.0.0.1:5000/riskCopeRecord/getCopeWithCopeID`, this.queryData).then((res) => {
      console.log(res);
      if(res.data.length===0){
        this.$message('没有符合查询条件的结果');
      }
      else {
        this.risk_cope = res.data[0];
      }
    });
    this.$axios.post(`http://127.0.0.1:5000/riskCopeTest/getCopeRecordWithCopeID`, this.queryData).then((res) => {
      console.log(res);
      if(res.data.length===0){
        this.$message('没有符合查询条件的结果');
      }
      else {
        this.risk_cope_record = res.data[0];
      }
    });
    this.$axios.post(`http://127.0.0.1:5000/riskCopeAna/getCopeAnaWithCopeID`, this.queryData).then((res) => {
      console.log(res);
      if(res.data.length===0){
        this.$message('没有符合查询条件的结果');
      }
      else {
        this.risk_cope_ana = res.data[0];
      }
    });
    this.$axios.post(`http://127.0.0.1:5000/emergency/getEmergencyWithCopeID`, this.queryData).then((res) => {
      console.log(res);
      if(res.data.length===0){
        this.$message('没有符合查询条件的结果');
      }
      else {
        this.emergency = res.data[0];
      }
    });
  },
  methods:{
    async editEmergency() {
      this.addEmergency.risk_cope_id = this.queryData.risk_cope_id
      this.addEmergency.content = this.emergency.content
      this.$axios.post(`http://127.0.0.1:5000/emergency/editEmergency`, this.addEmergency).then((res) => {
        console.log(res);
        this.st = res.data;
        if (this.st===1) {
          this.$message('更改成功');
          this.$refs.thisdrawer.closeDrawer();
          window.location.reload();
        }else{
          window.location.reload();
        }
      });
    },
  }

}
</script>

<style scoped>
.menu{
  width: 100%;
  float: left;
  height: 673px;
}
.mg{
  line-height: 40px;
  font-size: 17px;
}
</style>
